<!--分收入源趋势跟踪-->
<template>
  <div class="fenqy">
    <div class="operation">
      <el-form :inline="true" :model="form" label-width="80px" class="formList">
        <el-form-item label="选择区域">
          <dx-cascader  :area_id.sync="form.areaId" />
          <!-- <el-select v-model="form.areaId" placeholder="选择区域" @change="areaChange($event)">
            <el-option
              v-for="item in areaList"
              :key="item.areaId"
              :label="item.areaName"
              :value="item.areaId"
            ></el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="账期" style="width: 450px;" class="imcome-picker">
          <!-- <el-date-picker v-model="form.year" value-format="yyyy" type="year" placeholder="选择月"></el-date-picker> -->
            <el-date-picker
            style="width: 110px;"
            v-model="form.startDate"
            value-format="yyyyMM"
            type="month"
            placeholder="选择月"
          ></el-date-picker>
          <span>~</span>
          <el-date-picker
            style="width: 110px; margin-right: 15px;"
            v-model="form.endDate"
            value-format="yyyyMM"
            type="month"
            placeholder="选择月"
          ></el-date-picker>
          <el-button size="small" type="primary" @click="submitHandle">查询</el-button>
        </el-form-item>
        <el-form-item class="daochu">
          <el-button size="small" type="orange" @click="exportExcel(true)" style="margin-left: 20px">批量导出</el-button>
          <el-button size="small" type="orange" @click="exportExcel(false)" >导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="border-bottom:1px solid #EBEEF5;" class="tableBox">
      <el-table
              border
        stripe
        v-loading="tableLoading"
        :data="tableData"
        style="width: 100%"
        class="tableTh28"
        height="65vh"
              ref="table"
     
      >
        <!--    :span-method="arraySpanMethod" -->
        <el-table-column fixed prop="ysIncomeCatgName" label="来源大类"  width="140px"></el-table-column>
        <el-table-column fixed prop="incomeDetail" label="来源明细"  width="120px" show-overflow-tooltip></el-table-column>
        <el-table-column fixed prop="productTypeName" label="产品大类"  width="140px"></el-table-column>
        <el-table-column fixed prop="productTypeDetailName" label="产品明细" width="120px" show-overflow-tooltip></el-table-column>
        <el-table-column
          class-name="right-money"
          v-for="(item, index) in titleList"
          min-width="84"
          :key="index"
          :label="item"
          :prop="item"
        ></el-table-column>
      
      </el-table>
    </div>
  </div>
</template>

<script>
import { $budgetAPI } from "@/api";
import { getSessionStorage } from "@/common/js/storage";
import { createSpan } from "@/utils/mixin";
import prefixAPI from "@/api/prefixAPI"
import { getCookie, setCookie } from "@/common/js/cookie";

let accountInfo = JSON.parse(getSessionStorage('accountInfo'))

export default {
  props: {
    areaList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      form: {
        areaId: accountInfo.areaId,
        year: this.moment().format('YYYY'),
        startDate: "",
        endDate: "",
      },
      accountInfo: "",
      tableLoading: false,
      tableData: [],
      count: "",
      titleList: [],
      tableTemp: [
        { title1: "01_省计费平台出账", title2: "01_OCS出账收入" },
        { title1: "01_省计费平台出账", title2: "02_集团出账收入" },
        { title1: "01_省计费平台出账", title2: "03_OOCP一次性" },
        { title1: "01_省计费平台出账", title2: "04_OCS/OOCP分摊收入" },
        { title1: "01_省计费平台出账", title2: "05_欠费不确认" },
        { title1: "01_省计费平台出账", title2: "06_欠费收回" },
        { title1: "01_省计费平台出账", title2: "07_无现金流（赠金）" },
        { title1: "01_省计费平台出账", title2: "09_流量递延收入" },
        { title1: "01_省计费平台出账", title2: "99_其他" },
        { title1: "01_省计费平台出账", title2: "小计" },
        { title1: "02_省公司人工收入", title2: "01_网间结算" },
        { title1: "02_省公司人工收入", title2: "02_网内结算" },
        { title1: "02_省公司人工收入", title2: "03_省公司分摊收入" },
        { title1: "02_省公司人工收入", title2: "04_积分计提" },
        { title1: "02_省公司人工收入", title2: "05_积分兑换" },
        { title1: "02_省公司人工收入", title2: "06_省分成结算" },
        { title1: "02_省公司人工收入", title2: "07_预付费卡" },
        { title1: "02_省公司人工收入", title2: "99_其他" },
        { title1: "02_省公司人工收入", title2: "小计" },
        { title1: "03_分公司人工收入", title2: "01_全业务卡捆绑赠送" },
        { title1: "03_分公司人工收入", title2: "02_分公司分成结算" },
        { title1: "03_分公司人工收入", title2: "99_其他" },
        { title1: "03_分公司人工收入", title2: "小计" },
        { title1: "04_新会计准则影响", title2: "01_翼支付话补" },
        { title1: "04_新会计准则影响", title2: "03_手机终端减收" },
        { title1: "04_新会计准则影响", title2: "04_手机终端减收（追溯）" },
        { title1: "04_新会计准则影响", title2: "05_代金券减收" },
        { title1: "04_新会计准则影响", title2: "06_代金券减收（追溯）" },
        { title1: "04_新会计准则影响", title2: "小计" },
        { title1: "总计", title2: "总计" }
      ]
      // time:Date.parse(new Date()),
    };
  },
  created() {
    this.init();
    // this.form.year = this.moment().subtract(1,'months').format('YYYYMM')
  },
  methods: {
    // 初始化
    init() {
      this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
      // this.getCompanyByLvl();

      this.getMarketMonth();
      // this.submitHandle();
    },
    getMarketMonth() {
        let areaId = this.form.areaId
            ? this.form.areaId
            : this.accountInfo.areaId;
      let isMonthReport = 1;
      $budgetAPI.getIncomeSourceMonth(
        { areaId: areaId, isMonthReport: isMonthReport },
        res => {
          if (res || res.code == 0) {
            this.form.startDate = res.content.preSixMonth;
            this.form.endDate = res.content.maxAcctMonth;
            this.getData(areaId, this.form.startDate, this.form.endDate);
          }
        },
        err => {}
      );
    },
    submitHandle() {
      let areaId = this.form.areaId
        ? this.form.areaId
        : this.accountInfo.areaId;
      let startTime = this.form.startDate || "",
        endTime = this.form.endDate || "";
      this.getData(areaId, startTime, endTime);
    },
    getData(areaId, startTime, endTime) {
      let that = this;
      this.tableLoading = true;

      // findNewIncomeTrendBySource
      $budgetAPI.findNewIncomeTrendBySource(
        {
          areaId: areaId,
          startDate: startTime,
          endDate: endTime
        },
        res => {
          this.tableLoading = false;
          if (res.code === 0) {

            let content = res.content;
            that.titleList = content.titles;
            content.data.map(it => {
              it.dataList.map(item => {
                it[item.acctMonth] = item.indexValue;
              });
            });
            that.tableData = content.data;
            // this.tableTemp = this.mergeTableTemp(res.content);
            // this.spanArr = createSpan(this.tableTemp, ["indexCode", "areaName"]);
            // this.tableData = this.tableTemp;
          } else {
            this.alertError(res);

          }
          this.$nextTick(()=>{
              this.$refs.table.doLayout();
          })
        },
        err => {
          this.tableLoading = false;
        }
      );
    },
    // 合并tebleTemp和请求数据
    mergeTableTemp(content) {
      let newArr = [];
      for (let i = 0 ;i < content.length; i ++) {
        for (let j = 0 ; j < content[i].list.length ; j ++) {
          newArr.push({indexCode:content[i].indexCode, ...content[i].list[j]})
        }
      }
      console.log('newArr',newArr)
      return newArr
    },
    //分产品导出
    exportExcel(type) {
      let areaId = "";
      let year = "";
      if (this.form.areaId) {
        areaId = this.form.areaId;
      } else {
        areaId = this.accountInfo.areaId;
      }
      // if (this.form.year) {
      //   year = this.form.year;
      // } else {
      //   year = this.formatDate(new Date());
      // }

      let startTime = this.form.startDate || "",
        endTime = this.form.endDate || "";
      if (process.env.NODE_ENV == "development") {
        window.location.href =
          prefixAPI.loc +
          "/api/incomeAndIncomeSource/exportIncomeSourceData?areaId=" +
          areaId +
          "&startDate=" +
          startTime + 
          "&endDate=" +
          endTime + "&flag=" + type + '&token=' +
          getCookie('token');
      } else if (process.env.NODE_ENV == "production") {
        window.location.href =
          prefixAPI.hp +
          "/api/incomeAndIncomeSource/exportIncomeSourceData?areaId=" +
          areaId +
          "&startDate=" +
          startTime + 
          "&endDate=" +
          endTime + "&flag=" + type + '&token=' +
          getCookie('token');
      }
    },
    //获取当前时间
    formatDate: function(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y
    },
    //table合并行
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        return this.spanArr[columnIndex][rowIndex];
      }
    },
    //区域选择 返回ID和name
    areaChange(event) {
      let temp = this.areaList.find(item => {
        return (item.areaId = event);
      });
      this.form.areaName = temp.areaName;
    }
    //根据层级获取区域树
    // getCompanyByLvl(){
    //   $budgetAPI.getCompanyByLvl({
    //     lvl:this.accountInfo.areaLvl,
    //     areaId:this.accountInfo.areaId
    //   },res =>{
    //     if (res.code == 0) {
    //       this.areaList = res.content;
    //     } else {
    //       this.alertError(res);
    //     }
    //   },err =>{

    //   })
    // }
  }
};
</script>
<style lang="scss" scoped>
</style>
<style lang="scss">
.fenqy {
   .firstProject,.secondProject{
    .cell{
      color: #000;
      font-weight: 700;
    }
  }
  .firstProject.is-leaf {
    position: relative;
    border-right: 1px solid #d7e5fb!important;
    .cell{
     color: #d7e5fb;
    }
  }
  .secondProject.is-leaf {
    overflow: visible;
    // border-left: 2px solid #d7e5fb;
    .cell{
      transform: translateX(-38%);
    }
  }
}
</style>
